<template>
	<div class="crud-container flex-column pt-1 plr-1">
		<!-- <cl-tabs-card v-model="activeTab" :tabs="tabs" /> -->
		<div>
			<el-radio-group
				v-model="activeTab"
				v-for="(item, index) in tabs"
				:key="index"
			>
				<el-radio-button :label="item.name">{{ item.label }}</el-radio-button>
			</el-radio-group>
		</div>

		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component :key="tab.name" :is="tab.name" v-if="activeTab == tab.name" />
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
	</div>
</template>

<script>
import DayDetails from "./components/day-details";
import DayDetails2 from "./components/day-details2";
// import DayStatis from "./components/day-statis";
// import StoreStatis from "./components/store-statis";
const tabs = [
	{ label: "店-日详情", name: "day-details", auth: "store_finance_storedetails_daydetails" },
	{ label: "店-日详情2", name: "day-details2", auth: "store_finance_storedetails_daydetails2" }
	// { label: "店-日统计", name: "day-statis", auth: "store_finance_storedetails_daystatis" },
	// { label: "日-店统计", name: "store-statis", auth: "store_finance_storedetails_storestatis" },
];
export default {
	name: "FinanceStoreDetails",
	components: {
		DayDetails,
		DayDetails2
		// DayStatis,
		// StoreStatis,
	},
	data() {
		return {
			activeTab: ""
		};
	},
	computed: {
		tabs() {
			return tabs.filter(e => this.$auth(e.auth));
		}
	},
	mounted() {
		let tab = this.tabs[0];
		this.activeTab = tab?.name ?? "";
	}
};
</script>

<style lang="scss" scoped>
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
}
</style>
